<template>
  <!--标签-->
  <div :class="[type,'tag']">
    <span v-text="value"></span>
  </div>
</template>

<script>
  export default {
      props:{
          value:{
              type: String,
              default: () => "标签"
          },
          type: {
              type: String,
              default: () => "grey"
          }
      }
  }
</script>

<style scoped>
  .tag {
    display: inline-block;
    max-width: 70%;
    padding: 3px 3px;
    text-align: center;
    font-size: 12px;
    border-radius: 3px;
    letter-spacing: 1.5px;
    border: 1px solid rgba(210, 210, 210, 0.1);
    background-color: rgba(210, 210, 210,0.05);
  }
  .grey{
    /*color: grey;*/
    color: rgba(210, 210, 210, 0.5);
    border: 1px solid rgba(210, 210, 210, 0.1);
    background-color: rgba(210, 210, 210,0.05);
  }
  .blue{
    color: rgba(0, 157, 255,0.5);
    border: 1px solid rgba(0, 157, 255, 0.1);
    background-color: rgba(0, 157, 255,0.05);
  }
  .green{
    color: rgba(0, 216, 97, 0.5);
    border: 1px solid rgba(0, 216, 97, 0.1);
    background-color: rgba(0, 216, 97,0.05);
  }
  .orange{
    color: rgba(255, 136, 0, 0.5);
    border: 1px solid rgba(255, 136, 0, 0.1);
    background-color: rgba(255, 136, 0,0.05);
  }
  .red{
    color: rgba(255, 52, 52, 0.5);
    border: 1px solid rgba(255, 52, 52, 0.1);
    background-color: rgba(255, 52, 52,0.05);
  }
  .purple{
    color: rgba(128, 0, 102, 1);
    border: 1px solid rgba(128, 0, 128, 0.4);
    background-color: rgba(128, 0, 128, 0.1);
  }
</style>
